<template>
  <div>
    <page-header-wrapper></page-header-wrapper>
    <a-card style="margin-top: 20px">
      <div class="table-page-search-wrapper">
        <a-form :form="searchForm" layout="inline">
          <a-row :gutter="48">
            <SearchFormItems
              :searchKeys="FundInventorySearchKeys"
              :getDataWithKey="getDataWithKey"
              :onDateChange="onDateChange"
            >
            </SearchFormItems>
            <a-col :md="8" :sm="12" class="advanced_butns">
              <span
                class="table-page-search-submitButtons"
              >
                <a-button type="primary" @click="search">搜索</a-button>
                <a-button @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <div class="cont_box">
      <div class="table_header flex-between">
        <div class="table_name">{{ pageTitle }}</div>
      </div>
      <a-table
        :columns="FundInventoryColumn"
        :dataSource="dataSource"
        :pagination="pagination"
        :rowKey="(it) => it.id"
        :loading="loading"
        binvested
        :scroll="{ x: 1500 }"
      >
        <span slot="operation" slot-scope="text, record">
          <a-button size="small" type="link" @click="addRecord(record)">调账</a-button>
        </span>
      </a-table>
      <pagination
        :total="total"
        :page.sync="page"
        :size.sync="size"
        :onPageSizeChange="onPageSizeChange" 
        :onShowSizeChange="onShowSizeChange" 
      />
      <a-modal
        title="调账"
        v-model="addRecordVisible"
        destroyOnClose
        @ok="sureAddRecord"
        width="600px"
      >
        <div class="modal_body_cont">
          <a-form
            :form="modalForm"
            :label-col="{ span: 7 }"
            :wrapper-col="{ span: 15 }"
          >
            <modalFormItem
              :searchKeys="FundListAddKeys"
              :getDataWithKey="getDataWithKey"
            ></modalFormItem>
          </a-form>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { CurrencyTypes,TradeTypes,PayChannel,resetBillType} from '../../utils/constant.js'
import { FundInventorySearchKeys, FundInventoryColumn, FundListAddKeys } from "./config";
import {capitalFlowList,capitalAddRecord} from "@/api/capital";

export default {
  name: "FundList",
  data() {
    return {
      pageTitle: "",
      userId:'',
      FundInventorySearchKeys, FundInventoryColumn, FundListAddKeys,
      dataSource: [],
      pagination: false,
      page: 1,
      size: 50,
      total: 0,
      loading: false,
      searchForm: this.$form.createForm(this, { name: "fund_inventory_search" }),
      modalForm: this.$form.createForm(this, { name: "fund_inventory_modal" }),
      addRecordVisible:false,
      dates: [],
      listId:'',
      sortString: "createTime,desc",
    };
  },
  computed: {
    getDataWithKey() {
      return (key) => {
        switch (key) {
          case "currencyType":
            return CurrencyTypes ;
          case "addedType":
            return TradeTypes;
          case "flowType":
            return TradeTypes;
          case "channel":
            return PayChannel;
          case "type":
            return resetBillType;
          default:
            return [];
        }
      };
    },
  },
  created() {
    console.log(this.$route)
    this.pageTitle = this.$route?.meta?.title;
    this.userId = this.$route.query?.userId
    this.getList();
  },
  methods: {
    search() {
      this.page = 1;
      this.getList();
    },
    reset() {
      this.searchForm.resetFields();
      this.page = 1;
      this.getList();
    },
    onPageSizeChange(page, size) {
      this.page = page;
      this.getList(page, size);
    },
    onShowSizeChange(page, size){
      this.page = page;
      this.size = size;
      this.getList(page, size);
    },
    onDateChange(date, dateString) {
      this.dates = dateString;
    },
    cameltoLine(value) {
      return value.replace(/([A-Z])/g, "_$1").toLowerCase();
    },
    // 获取列表
    async getList(currentPage, currentSize) {
      this.loading = true;
      const { page, size,userId, dates, } = this;
      let [begin='',end =''] = dates || []
      this.searchForm.validateFields(async (err, values) => {
        if (!err) {
          delete values.dates;
          let params = {
            id:userId,
            pageNum: currentPage || page,
            pageSize: currentSize || size,
            ...values,
            ...{
              operateStartTime:begin !=''?moment(begin).format('YYYY-MM-DD HH:mm:ss'):'',
              operateEndTime: end !=''?moment(end).format('YYYY-MM-DD HH:mm:ss'):'',  
            },
            // expireDate:
            //   (values?.expireDate && values?.expireDate.format("YYYY-MM-DD")) ||
            //   "",
          };
          const res = await capitalFlowList(params);
          if (res?.success) {
            this.total = res?.data?.total || 0;
            this.dataSource = res?.data?.list || [];
          } else {
            this.$message.error(res?.message);
          }
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
    },
    addRecord(record){
      this.addRecordVisible = true
    },
    
    sureAddRecord(){
      let {userId} = this
      this.modalForm.validateFields((err, values) => {
        if (!err) {
          let params = {
            ...values,
            capitalId:userId,
            type:Number(values.type),
            operateTime: moment(values.operateTime).format('YYYY-MM-DD hh:mm:ss'),
          };
          console.log("params>>>", params);
          capitalAddRecord(params).then(res =>{
            console.log('jajajaj',res)
            if(res?.success){
              this.$message.success("添加成功");
              this.listId = "";
              this.addRecordVisible = false;
              this.getList();
            }else{
              this.$message.error(res?.message)
            }
          })
        }
      })
    }
  },
};
</script>
<style scoped>
:deep(.ant-calendar-picker) {
  width: 100% !important;
}
</style>
